<template>
  <div>
    <!-- 文字 -->
    <div class="m-text" v-for="(song, index) in songs" :key="song.id">
      <div class="t1 t2">
        <span>{{ index + 1 }}</span>
        <i class="t1-span" @click="playMusic(song.id, song.al.picUrl)"></i>
      </div>

      <div class="t1">
        <a @click="gosong(song.id)" >{{ song.name }}</a>
      </div>

      <div class="t1">
        <span>{{ moment(song.dt).format("mm:ss") }}</span>
      </div>

      <div class="t1">
        <div class="t1-a1">
          <div class="t1-as">
            <a @click="goartist(song.ar[0].id)">{{ song.ar[0] ? song.ar[0].name : "" }} </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Medley",
  props: ["songs"],
  data() {
    return {
      moment,
    };
  },
  methods: {
    // 传参到播放列表
    playMusic(ids, picUrl) {
      //  console.log(this)
      this.$store.dispatch("getDetailList", ids);
      const big = {
        ids,
        picUrl,
      };
      this.$bus.$emit("singid", big);
    },
          // 跳转歌手
    goartist(id) {
      this.$router.push(`/artist?id=${id}`);
      // console.log(id)
    },
    // 跳转歌曲页
    gosong(id) {
       this.$router.push(`/song?ids=${id}`);
    },
  },

};
</script>

<style lang="less" scoped>
.m-text {
  width: 100%;
  display: grid;
  font-size: 12px;
  // grid-template-columns :repeat(auto-fill,);
  height: 35px;
  background-color: rgb(247, 247, 247);
  // grid布局
  border: solid 1px rgb(216, 216, 216);
  grid-template-columns: 74px auto 111px 20%;
  align-items: center;
  a {
    color: rgb(27, 25, 25);
  }
  .t1 {
    margin-left: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    .t1-a1 {
      .t1-as {
        width: 114px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }

  .t2 {
    display: flex;
    justify-content: space-between;
    .t1-span {
      display: inline-block;
      margin-right: 10px;
      width: 17px;
      height: 17px;
      cursor: pointer;
      background-position: 0 -103px;
      background-image: url("~@/assets/image/table.png");
    }
  }
}
.m-text:nth-child(2n + 1) {
  background-color: rgb(255, 255, 255);
}
</style>
